<template>
	<view class="content">
		<view class="content_time">
			{{itemMobile.datetime}}
		</view>
		<view class="content_item u-flex" :class="itemMobile.self_side ? 'content_item--right' : 'content_item--left'">

			<u-image :class="itemMobile.self_side ? 'u-m-l-26' : 'u-m-r-26'" :src="itemMobile.avatar" :width="91.5"
				:height="91.5" shape="circle"></u-image>

			<view class="content_item_phone" v-if="itemMobile.message">
				<view class="content_item_phone_tp u-flex">
					<u-image src="/pages/pagesMessage/static/switch-phone.png" width="64" height="64"></u-image>
					<view class="u-m-l-30 phone-text">
						<view v-if="itemMobile.message.status != 1">
							我想和您交换手机号， 您是否同意
						</view>
						<view v-else class="switch-phone-success">
							<view class="success-txt1">
								{{itemMobile.message.contact}}的手机号：
							</view>
							<view class="success-txt2">
								{{itemMobile.message.mobile}}
							</view>
						</view>
					</view>
				</view>
				<view class="content_item_phone_btm">
					<view v-if="itemMobile.message.status == 0" class="btn-phone-default">
						<view class="btn refuse" @click="$u.throttle(handleRefuse, 2000)">拒绝</view>
						<view class="btn agree" @click="$u.throttle(handleAgree, 2000)">同意</view>
					</view>
					<view v-else-if="itemMobile.message.status == 1" class="btn-phone-success">
						<view class="btn dial" @click="$u.throttle(handleDial, 1000)">拨号</view>
						<view class="btn copy" @click="$u.throttle(handleCopy, 1000)">复制</view>
					</view>
					<view v-else-if="itemMobile.message.status == 2" class="btn-phone-error">
						已拒绝
					</view>
				</view>
			</view>
		</view>

		<u-purview-modal v-model="data.isJurisdiction" purviewName="拨打电话"
			@cancel="data.isJurisdiction=false"></u-purview-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue'
	import {
		useUserIm
	} from '/stores/userIm.js'
	import permision from "@/js_sdk/permission/permission.js"
	const IM = useUserIm()
	const itemMobile = ref({})
	const data = reactive({
		isJurisdiction: false
	})
	const props = defineProps({
		itemMobile: Object,
		cid: [String, Number]
	})
	watch(()=> props.itemMobile,(nv)=>{
		itemMobile.value = nv
	},{
		immediate:true,
		deep:true
	})
	/**
	 * 拒绝
	 */
	const handleRefuse = () => {
		var msgObj = {
			controller: 'SendMobile',
			action: 'refuse',
			args: {
				token: IM.imToken,
				messageid: itemMobile.value.messageid,
				cids: props.cid,
				content: '对方已拒绝交换手机号',
				title: uni.getStorageSync('userName')
			}
		}
		IM.webSocket_send(msgObj)
	}
	/**
	 * 同意
	 */
	const handleAgree = () => {
		var msgObj = {
			controller: 'SendMobile',
			action: 'agree',
			args: {
				token: IM.imToken,
				messageid: itemMobile.value.messageid,
				cids: props.cid,
				content: '对方已同意交换手机号',
				title: uni.getStorageSync('userName')
			}
		}
		IM.webSocket_send(msgObj)
	}
	// 拨号
	const handleDial = async () => {
		if (uni.$u.os() != 'ios') {
			var phone = await permision.requestAndroidPermission(
				"android.permission.CALL_PHONE"); //拨打电话
		}
		if (phone == true || phone == 1) {
			uni.makePhoneCall({
				phoneNumber: itemMobile.value.message.mobile
			});
		} else {
			data.isJurisdiction = true;
		}

	}
	// 复制
	const handleCopy = () => {
		uni.setClipboardData({
			data: itemMobile.value.message.mobile,
			success() {
				uni.$u.toast('复制成功')
			}
		});
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-bottom: 60rpx;

		&_time {
			text-align: center;
			margin: 46rpx 0 28rpx 0;
			color: #999999;
			font-size: 24rpx;
		}

		&_item--left {
			flex-direction: row;
			margin-left: 30rpx;
		}

		&_item--right {
			flex-direction: row-reverse;
			margin-right: 30rpx;
		}

		&_item {
			font-size: 28rpx;
			height: 100%;
			margin-bottom: 60rpx;

			&_phone {
				width: 480rpx;
				height: 240rpx;
				background: #ffffff;
				border-radius: 30rpx;

				.phone-text {
					flex: 3;
					color: #666666;
					font-size: 26rpx;

					.switch-phone-success {
						.success-txt2 {
							color: #FF6524;
							margin-top: 10rpx;
						}
					}
				}

				&_tp {
					padding: 40rpx;
				}

				&_btm {
					.btn-phone-default {
						display: flex;
						justify-content: center;
						align-items: center;

						.btn {
							width: 120rpx;
							height: 50rpx;
							display: flex;
							justify-content: center;
							text-align: center;
							align-items: center;
							border-radius: 10rpx;

							&.agree {
								background: #00D075;
								border: 2rpx solid #00D075;
								color: #fff;
								margin-left: 52rpx;
							}

							&.refuse {
								background: #ffffff;
								border: 2rpx solid #00D075;
								color: #00D075;
							}
						}
					}

					.btn-phone-success {
						display: flex;
						border-top: 2rpx solid #e8e8e8;

						.btn {
							flex: 1;
							text-align: center;
							line-height: 84rpx;
							position: relative;
							font-size: 26rpx;

							&::before {
								content: "";
								position: absolute;
								right: 0;
								width: 2rpx;
								height: 42rpx;
								background: #e8e8e8;
								top: 50%;
								transform: translateY(-50%);
							}

							&:last-child::before {
								display: none;
							}

							&.copy {
								color: #5792ff;
							}

							&.dial {
								color: #666666;
							}
						}
					}

					.btn-phone-error {
						border-top: 2rpx solid #e8e8e8;
						text-align: center;
						height: 84rpx;
						line-height: 84rpx;
						color: #999999;
						font-size: 26rpx;
					}


				}
			}
		}

	}
</style>